<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base th:href="${#servletContext.getContextPath()+'/'}">

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <link href="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/css/bootstrap-switch.min.css" rel="stylesheet">

    <!-- 引入JQuery的js -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>

    <script src="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/js/bootstrap-switch.min.js"></script>

    <script type="text/javascript" src="js/httpUtils.js"></script>
    <script>
        $(function () {
            $('[data-switch]').bootstrapSwitch({
                // size: 'mini',   // 设置开关控制器的大小
                // onColor: 'success',   // 设置打开状态的颜色
                // offColor: 'danger',   // 设置关闭状态的颜色
                onText: '置顶',    // 设置打开状态的文本
                offText: '取消',    // 设置关闭状态的文本
                // labelText: 'Toggle me',   // 设置标签的文本
                // handleWidth: 50,   // 设置控制器柄的宽度
                //  onSwitchChange: function(event, state) {   // 设置状态更改事件的回调函数
                //      console.log('Switch state: ' + state);
                //  }
            });
        });

        /**
         * @param id 帖子ID
         * @param eleObj 当前开关的元素
         */
        function postTypeChange(id, eleObj, oldType) {

            // 1、获取当前开关的状态
            var newType = $(eleObj).prop("checked") ? 1 : 0;

            if (oldType == newType) {
                console.log("请点对位置")
                return;
            }

            // 2.封装数据
            var param = new Object();
            param.id = id;
            param.type = newType;

            // 3.发送请求
            sendPost("admin/updatePostType", param, function (data) {
                // location.reload();
            });
        }
    </script>
</head>
<body>

<h3>管理员/帖子管理</h3>

<table border="1" class="table table-hover">
    <tr>
        <th>标题</th>
        <th>作者</th>
        <th>评论数</th>
        <th>点赞数</th>
        <th>状态</th>
        <th>是否置顶</th>
    </tr>

    <tr th:each="postDto:${postDtoList}">
        <td th:text="${postDto.post.title}"/>
        <td th:text="${postDto.user.username}"/>
        <td th:text="${postDto.post.commentCount}"/>
        <td th:text="${postDto.post.likeCount}"/>
        <td>
            <span th:if="${postDto.post.status==0}" class="label label-primary">正常</span>
            <span th:if="${postDto.post.status==1}" class="label label-success">精华</span>
            <span th:if="${postDto.post.status==2}" class="label label-default">拉黑</span>
        </td>
        <td>
            <input type="checkbox" th:checked="${postDto.post.type==1}"
                   th:onchange="|postTypeChange(${postDto.post.id},this,${postDto.post.type})|" data-switch>
            <!--            <span th:if="${postDto.post.type==0}"  class="label label-info">普通</span>-->
            <!--            <span th:if="${postDto.post.type==1}" class="label label-danger">置顶</span>-->
        </td>
    </tr>
</table>
</body>
</html>